<template>
	<view class="swiper">
		<u-swiper
			:imgMode="imgMode"
			:keyName="keyName"
            :list="list"
            :previousMargin="previousMargin"
            :nextMargin="nextMargin"
            :circular="circular"
            :autoplay="autoplay"
			@change="changeSwiper"
            :radius="radius"
            :bgColor="bgColor"
			:height='height'
			:indicatorStyle="{right:60+'px'}"
			:indicator="indicator"
			:indicatorInactiveColor='indicatorInactiveColor'
			:indicatorActiveColor="indicatorActiveColor"
			indicatorMode="dot"
        >
			<view
			slot="indicator"
			class="indicator">
			    <!-- <view
			    class="indicator__dot"
			    v-for="(item, index) in list3"
			    :key="index"
				:style="{background:current==index?indicatorActiveColor:indicatorInactiveColor}"
			    >
				{{index+1}}
			    </view> -->
				<view class="num" :style="{background:indicatorInactiveColor}"><text style="font-size: 60rpx;">{{current+1}}</text>{{'/'+list.length}}</view>
			</view>
		</u-swiper>
	</view>
</template>

<script>
	export default {
		props:{
			indicatorActiveColor:{
				default:'#fff'
			},
			indicatorInactiveColor:{
				default:"rgba(255, 255, 255, 0.35)"
			},
			height:{
				default:'150'
			},
			bgColor:{
				default:'transparent',
				type:String
			},
			radius:{
				default:5
			},
			autoplay:{
				default:true
			},
			circular:{
				default:true
			},
			nextMargin:{
				default:30
			},
			previousMargin:{
				default:30
			},
			keyName:{
				default:'url'
			},
			imgMode:{
				default:'aspectFill'
			},
			indicator:{
				default:true
			},
			list:{
				type:Array,
				required:true
			}
		},
        data() {
            return {
				current:0,
            }
        },
		methods:{
			changeSwiper(e){
				this.current = e.current
			}
		}
    }
</script>

<style lang="scss" scoped>
	.indicator{
		display: flex;
		width: 100%;
		// justify-content: center;
		justify-content: flex-end;
		.indicator__dot{
			margin: 6rpx;
			width: 16rpx;
			height: 10rpx;
			border-radius: 10rpx;
		}
	}
	.num{
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		line-height: 100rpx;
		text-align: center;
	}
</style>